<template>
	<view class="topDiv">
		<view v-if="loginData.userName!=null">
			<u-row gutter="16">
				<u-col span="12">
					<h1 class="topDiv-title">Hi,{{ loginData.userName }}</h1>
					<h5 class="topDiv-subtitle">欢迎来到校园服务平台app</h5>
					<!-- <view class="t-icon t-icon-aixin"></view> -->
				</u-col>
				<u-col span="4" class="qdDiv">
					<u-button size="mini" shape="circle" type="warning">签到</u-button>
				</u-col>
			</u-row>
		</view>
		<!-- 未登录时 -->
		<view style="width: 100%;" v-else>
			<u-button @click="doLogin" size="medium" shape="circle" type="success">点击微信登录</u-button>
		</view>
		<!-- 快捷功能菜单 -->
		<view class="fastNav">
			<u-row gutter="12" justify="space-between">
				<u-col span="4">
					<view class="navDiv">
						<u-icon @click="doScan" name="scan" size="50" label-color="rgb(43,109,166)"
							color="rgb(43,109,166)" label="扫码" label-pos="bottom"></u-icon>
					</view>
				</u-col>
				<u-col span="4" class="navDiv">
					<view class="navDiv">
						<u-icon @click="openSxt" name="coupon-fill" size="50" label-color="rgb(43,109,166)"
							color="rgb(43,109,166)" label="付款码" label-pos="bottom"></u-icon>
					</view>
				</u-col>
				<u-col span="4" class="navDiv">
					<view class="navDiv">
						<u-icon name="red-packet" size="50" label-color="rgb(43,109,166)" color="rgb(43,109,166)"
							label="充值" label-pos="bottom"></u-icon>
					</view>
				</u-col>
			</u-row>
		</view>

		<!-- 下方元素 -->
		<view class="contentDiv">
			<!-- 通知div -->
			<view class="noticeDiv">
				<u-notice-bar mode="horizontal" :text="msgList"></u-notice-bar>
				<!-- 				<u-notice-bar mode="vertical" :duration="1500" :list="msgList"></u-notice-bar>
 -->
			</view>

			<!-- 菜单栏 -->
			<u-grid :col="4">
				<u-grid-item v-for="(item,index) in navData" :key="index">
					<view :class="'t-icon t-'+item.icon"></view>
					<text class="iconTitle">{{ item.title }}</text>
				</u-grid-item>
			</u-grid>

			<!-- 广告轮播 -->
			<view class="swiperDiv">
				<u-swiper :list="lbList"></u-swiper>
			</view>

			<!-- 学分活动导航栏 -->
			<view class="xfNav">
				<u-cell-group>
					<u-cell :border="false" icon="calendar-fill" title="学分活动" value="更多" isLink></u-cell>
				</u-cell-group>
			</view>

			<!-- 下拉条件 -->
			<view class="tjDiv">
				<u-grid :border="false" col="4">
					<u-grid-item @click="tjData.bqShow=true"><u-icon name="arrow-down" label="标签"
							labelPos="left"></u-icon></u-grid-item>
					<u-grid-item><u-icon name="arrow-down" label="分类" labelPos="left"></u-icon></u-grid-item>
					<u-grid-item><u-icon name="arrow-down" label="时间" labelPos="left"></u-icon></u-grid-item>
					<u-grid-item><u-icon name="arrow-down" label="级别" labelPos="left"></u-icon></u-grid-item>
				</u-grid>
			</view>

			<!-- 活动列表 -->
			<view class="hdList">
				<view class="oneHd" v-for="(item,index) in xfhdList">
					<u--image radius="8" :showLoading="true" :src="item.img" width="100%" height="90px"></u--image>
					<u--text :lines="2" :bold="true" :text="item.name"></u--text>
					<u-cell :border="false">
						<u--text size="5" color="gray" slot="title" :text="item.tag"></u--text>
						<u--text size="5" color="#2E7FEC" slot="right-icon" :text="item.times"></u--text>
					</u-cell>
					<view class="hdStateDiv">
						<u--text color="#FFF" size="10" :text="item.state"></u--text>
					</view>
				</view>
			</view>

			<!-- 校园头条导航栏 -->
			<view class="xfNav">
				<u-cell-group>
					<u-cell :border="false" icon="order" title="校园头条" value="更多" isLink></u-cell>
				</u-cell-group>
			</view>

			<!-- 校园头条一览界面 -->
			<view class="schoolhotDiv">
				<u-row>
					<u-col :span="6">
						<u-swiper :list="schoolHotDataList" keyName="image" showTitle circular></u-swiper>
					</u-col>
					<u-col :span="6">
						<u-row v-for="(item,index) in schoolHotDataTextList">
							<u-col :span="2" style="padding-left: 9px;box-sizing: border-box;">
								<view class="hotNumber">{{ index+1 }}</view>
							</u-col>
							<u-col :span="10" style="padding-left: 9px;box-sizing: border-box;">
								<u--text :lines="2" :text="item"></u--text>
							</u-col>
						</u-row>
					</u-col>
				</u-row>
			</view>


		</view>

		<!-- 弹出内容 -->
		<u-picker :show="tjData.bqShow" @cancel="tjData.bqShow=false" @confirm="tjData.bqShow=false"
			:columns="tjLists.bqList"></u-picker>

	</view>
</template>

<script>
	export default {
		name: "home",
		data() {
			return {
				// 登录用户信息
				loginData: {
					userName: "测试微信用户"
					//userName:null
				},
				// 滚动消息
				msgList: "你........",
				// 菜单栏信息
				navData: [{
						icon: "icon-ikun1",
						title: "健康打卡"
					},
					{
						icon: "icon-shouji",
						title: "话费充值"
					}, {
						icon: "icon-dushu",
						title: "学生兼职"
					}, {
						icon: "icon-guaichiyao",
						title: "健康助手"
					}, {
						icon: "icon-biaoqian",
						title: "水电缴费"
					}, {
						icon: "icon-rili",
						title: "学校介绍"
					}, {
						icon: "icon-xinxi",
						title: "通知公告"
					}, {
						icon: "icon-shoucang",
						title: "全部应用"
					}
				],
				// 轮播图数据
				lbList: [
					"https://img.zcool.cn/community/0159f45acfebe8a8012138675650db.jpg@3000w_1l_2o_100sh.jpg",
					"https://img.zcool.cn/community/011289577de8da0000018c1be01da0.jpg"
				],
				// 下拉框数据-选中数据
				tjData: {
					bq: null,
					bqShow: false
				},
				// 下拉框数据-列表数据
				tjLists: {
					bqList: [
						["报名中", "报名结束"]
					]
				},
				// 学分活动数据
				xfhdList: [{
						state: "报名中",
						img: "https://img1.baidu.com/it/u=3307266409,3569522291&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=340",
						name: "天天一起打太极真的是泰裤辣",
						tag: "运动项目",
						times: "06.03~07.08"
					},
					{
						state: "报名中",
						img: "https://img1.baidu.com/it/u=3307266409,3569522291&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=340",
						name: "天天一起打太极真的是泰裤辣",
						tag: "运动项目",
						times: "06.03~07.08"
					},
					{
						state: "报名中",
						img: "https://img1.baidu.com/it/u=3307266409,3569522291&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=340",
						name: "天天一起打太极真的是泰裤辣",
						tag: "运动项目",
						times: "06.03~07.08"
					},
					{
						state: "报名中",
						img: "https://img1.baidu.com/it/u=3307266409,3569522291&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=340",
						name: "天天一起打太极真的是泰裤辣",
						tag: "运动项目",
						times: "06.03~07.08"
					},
					{
						state: "报名中",
						img: "https://img1.baidu.com/it/u=3307266409,3569522291&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=340",
						name: "天天一起打太极真的是泰裤辣",
						tag: "运动项目",
						times: "06.03~07.08"
					},
					{
						state: "报名中",
						img: "https://img1.baidu.com/it/u=3307266409,3569522291&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=340",
						name: "天天一起打太极真的是泰裤辣",
						tag: "运动项目",
						times: "06.03~07.08"
					},
					{
						state: "报名中",
						img: "https://img1.baidu.com/it/u=3307266409,3569522291&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=340",
						name: "天天一起打太极真的是泰裤辣",
						tag: "运动项目",
						times: "06.03~07.08"
					}
				],
				// 校园头条数据-图片
				schoolHotDataList: [{
					image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}],
				// 校园头条数据-文字
				schoolHotDataTextList:[
					"昨夜星辰昨夜风，画楼西畔桂堂东",
					"身无彩凤双飞翼，心有灵犀一点通",
					"谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳"
				]
			}
		},
		methods: {
			// 进行微信认证登录
			doLogin() {
				let _this = this;
				uni.getUserProfile({
					desc: "获取微信信息进行登录",
					success(res) {
						_this.loginData.userName = res.userInfo.nickName;
					}
				});
			},
			// 扫码功能
			doScan() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			// 打开摄像头
			openSxt() {
				var img = null;
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success(res) {
						img = res;
					}
				});

				console.dir(img);
			}
		}
	}
</script>

<style scoped>
	.topDiv {
		width: 100vw;
		height: 370upx;
		background: linear-gradient(180deg, rgb(51, 134, 255), #FFF);
		display: flex;
		align-items: center;
		padding-left: 25px;
		padding-right: 25px;
		box-sizing: border-box;
		position: relative;
	}

	.fastNav {
		width: 90vw;
		height: 200upx;
		background-color: white;
		border-radius: 25upx;
		position: absolute;
		top: 250upx;
		left: 35upx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
	}

	.topDiv-title {
		font-size: 35upx;
		color: #FFF;
		margin-bottom: 10upx;
	}

	.topDiv-subtitle {
		font-size: 25upx;
		color: #FFF;
	}

	.qdDiv {
		display: flex;
		justify-content: flex-end;
	}

	.navDiv {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		box-sizing: border-box;
		padding-top: 33upx;
	}

	.contentDiv {
		position: absolute;
		width: 100vw;
		height: 1002upx;
		top: 500upx;
		left: 0px;
		overflow-y: auto;
	}

	.noticeDiv {
		width: 100vw;
		height: 100upx;

	}

	.swiperDiv {
		box-sizing: border-box;
		padding: 10upx 20upx;
	}

	.hdList {
		box-sizing: border-box;
		padding: 20upx 20upx;
		display: flex;
		justify-content: start;
		flex-wrap: wrap;
	}

	.oneHd {
		width: 48%;
		height: auto;
		display: inline-block;
		margin-top: 10upx;
		margin-right: 10upx;
		position: relative;
	}

	.hdStateDiv {
		position: absolute;
		top: 0upx;
		left: 0upx;
		background-color: #2E80E6;
		box-sizing: border-box;
		padding: 9upx 10upx;
		border-radius: 8px 0px 8px 0px;
	}
	.hotNumber{
		font-size: 40upx;
		color:#9CBAE4;
		font-weight: bolder;
		font-style: italic;
		background-color: #F1F1F1;
		border-radius: 8px;
		display: inline-block;
		width: 60upx;
		text-align: center;
	}
</style>